<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增疾病管理')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>

</head>
<style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    body{background:#333;}

    .words-split{vertical-align: middle;}
    .lbl-input{
        display: inline-block;width: 120px; height: 26px;
        line-height: 26px;
        min-height: 26px;
        text-indent: 1em;
        border: 1px solid #ddd; border-radius: 5px;
        color:#002530;
        vertical-align: middle;
    }
    .words-split a{display: inline-block; padding:0 20px 0 8px; position: relative; margin:0 4px; }
    .words-split a em{display:none; width: 16px; height: 100%; position: absolute; background: #f60;right: 0;top: 0;}
    .words-split a em:after{ content: "-"; color: #fff; font: bold 20px 'Microsoft Yahei';}
    .words-split a:hover em{ display: block; }
    a.words-split-add{display: inline-block;font: bold 20px 'Microsoft Yahei'; color: #2cac93}

    .fm-button {
        display: inline-block;
        text-align: center;
        color: #fff;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        padding: 0 1em;
        border-radius: 3px;
        opacity: .9;
        filter: alpha(opacity=90);
        background:#2cac93;
    }
    a{text-decoration:none;}
    h3{color: #002530}
</style>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-disease-add">

        <div class="tab-content">
            <div id="tab-1" class="tab-pane active" style="padding: 20px">
                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-2 control-label">父级科目</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <input id="treeId" name="pid" type="hidden" th:value="${disease?.id}"/>
                                <input class="form-control" placeholder="请选择父级疾病" type="text" onclick="selectDiseaseTree()" id="treeName" readonly="true" th:value="${disease?.name}">
                                <span class="input-group-addon"><i class="fa fa-search"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class="col-sm-2 control-label">英文名称</label>
                        <div class="col-sm-10">
                            <input name="nameEn" id="nameEn" class="form-control" placeholder="请输入英文名称" type="text" required>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-2 control-label">中文名称</label>
                        <div class="col-sm-10">
                            <input name="name" id="name" class="form-control" placeholder="请输入中文名称" type="text" required>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class="col-sm-2 control-label">排序</label>
                        <div class="col-sm-10">
                            <input name="sortid" class="form-control" placeholder="请输入排序数字" type="text">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-1 control-label">描述</label>
                    <div class="col-sm-11">
                       <textarea name="drugD" class="form-control" placeholder="请输入描述" type="text">
                    </textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-2 control-label">标题</label>
                        <div class="col-sm-10">
                            <input name="drugT" class="form-control" placeholder="请输入标题" type="text">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class="col-sm-2 control-label">关键词</label>
                        <div class="col-sm-10">
                            <input name="drugK" class="form-control" placeholder="请输入关键词" type="text">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-1 control-label">靶点</label>
                    <div class="col-sm-11">
                        <input type="text" name="staticPath" value="" id="staticPath" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-1 control-label">疾病药品描述:</label>
                    <div class="col-sm-11">
                        <input type="hidden" class="form-control" required>
                        <script id="drugDescribe" name="drugDescribe" type="text/plain"></script>
                    </div>
                </div>
                <div class="form-group" id="flagShow">
                    <label class="col-sm-1 control-label">临床招募描述:</label>
                    <div class="col-sm-11">
                        <input type="hidden" class="form-control" required>
                        <script id="lcDescribe" name="lcDescribe" type="text/plain"></script>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script src="/ueditor/ueditor.config.js" type="text/javascript" charset="utf-8"></script>
<script src="/ueditor/ueditor.all.js" type="text/javascript" charset="utf-8"></script>
<script src="/ueditor/lang/zh-cn/zh-cn.js" type="text/javascript" charset="utf-8"></script>
<script th:inline="javascript">
    var prefix = ctx + "new/disease"
    $("#form-disease-add").validate({
        focusCleanup: true
    });
    function remove(e) {
        $(e).parent().remove();
    }
    $(document).ready(function () {
        parent.$('body').find('.layui-layer-max:not(.layui-layer-maxmin)').click()
    })

    function submitHandler() {
        var jsons = {};
        if ($.validate.form()) {
            if('' == $('#name').val()){
                $.modal.alertError("请填写【基本信息】中的疾病名称！");
                return
            }
             var staticPath = $('#staticPath').val();
             var arr = staticPath.split(',');
             // 创建对象集合，集合中的每个对象都包含一个键为 'name' 的属性
             var objSet = arr.map(item => ({ name: item }));
            let formData = $('#form-disease-add').serializeArray()
            console.log(formData);
            $.each(formData, function (k, v) {
                jsons[v.name] = v.value;
            });
            jsons['diseaseTarget']=objSet
            var jsonvalue = JSON.stringify(jsons)
            save(prefix + "/add", jsonvalue);
        }
    }

    //json请求
    function save(url, data, callback) {
        var config = {
            url: url,
            type: "post",
            dataType: "json",
            data: data,
            headers: {
                'Content-Type': 'application/json;charset=utf8'
            },
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍候...");
                $.modal.disable();
            },
            success: function (result) {
                if (typeof callback == "function") {
                    callback(result);
                }
                $.operate.successCallback(result);
            }
        };
        $.ajax(config)
    }

    $(".file-upload").fileinput({
        uploadUrl: ctx + 'common/upload',
        maxFileCount: 1,
        autoReplace: true
    }).on('fileuploaded', function (event, data, previewId, index) {
        $("input[name='" + event.currentTarget.id + "']").val(data.response.fileName)
    }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('')
    })

    /*疾病管理-新增-选择父疾病管理树*/
    function selectDiseaseTree() {
        var options = {
            title: '疾病管理选择',
            width: "480",
            url: prefix + "/selectDiseaseTree/" + $("#treeId").val(),
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero){
        var body = $.modal.getChildFrame(index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        $.modal.close(index);
    }

    //富文本
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function (action) {
        if (action == 'uploadimage' || action == 'uploadscrawl') {
            return '/common/upload';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }
    var ue = UE.getEditor('drugDescribe', {
        autoHeightEnabled: false,//是否自动长高
        autoFloatEnabled: true,//是否保持toolbar的位置不动
        scaleEnabled: true,//是否可以拉伸长高
        initialFrameWidth: 'auto',//初始化编辑器宽度
        initialFrameHeight: 300,//初始化编辑器高度
    });
    ue.ready(function () {
    })

    var ue = UE.getEditor('lcDescribe', {
        autoHeightEnabled: false,//是否自动长高
        autoFloatEnabled: true,//是否保持toolbar的位置不动
        scaleEnabled: true,//是否可以拉伸长高
        initialFrameWidth: 'auto',//初始化编辑器宽度
        initialFrameHeight: 300,//初始化编辑器高度
    });
    ue.ready(function () {
    })
</script>
<script type="text/javascript">
    var WS = function(opt){

        var regexp = opt.regexp || /\S/,
            el = $(opt.el),
            list = el.val().split(','),
            holder = $('<span class="words-split"></span>'),
            add = $('<a href="javascript:void(0)" class="words-split-add">+</a>');

        // for (var i = 0; i < list.length; i++) {
        //     holder.append( $('<a href="javascript:void(0)" class="fm-button">'
        //     +list[i]+'<em> </em></a>') );
        // }

        el.hide().after( holder );
        holder.after(add);

        holder.on('click','a>em',function(){	//刪除
            $(this).parent().remove();
            //当标签为空时，显示临床html编辑框
            if(null != holder.text().match(/\S+/g)){
                el.val( holder.text().match(/\S+/g).join(',') )
            }else{
                document.getElementById('flagShow').style.display = 'block';
            }
        });

        add.on('click',function(){				//添加预处理
            $(this).hide();
            holder.append( $('<span class="lbl-input" contenteditable="true"/>') )


        });

        holder.on('blur','.lbl-input',function(){	//验证添加字段
            var t = $(this),v = t.text();
            if( regexp.test(v) ){
                t.remove();
                add.show();
                holder.append( $('<a href="javascript:void(0)" class="fm-button">'+v+'<em> </em></a>') );
                el.val( holder.text().match(/\S+/g).join(',') )
                //验证添加标签时，隐藏html编辑框
                if(null != holder.text().match(/\S+/g)){
                    document.getElementById('flagShow').style.display = 'none';
                }
            }else if(!v){
                t.remove();
                add.show();
            }else{
                alert('输入不合法');
            }
        });

        holder.on('keydown','.lbl-input',function(e){
            switch(e.keyCode){
                case 13:
                case 27: $(this).trigger('blur');
            }
        });

    }

    WS({el:'#staticPath'});
</script>
</body>
</html>